<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>我的页面</title>
    <link href="../css/style2.css" rel="stylesheet" type="text/css">
    <link rel="Shortcut Icon" href="../images/icon.png" type="image/png" />
    <script
            src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <style>
        .black_overlay {
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index: 1001;
            -moz-opacity: 0.8;
            opacity: .80;
            filter: alpha(opacity = 88);
        }
        .white_content {
            display: none;
            position: absolute;
            top: 25%;
            left: 25%;
            width: 55%;
            height: 55%;
            padding: 20px;
            border: 10px solid orange;
            background-color: white;
            z-index: 1002;
            overflow: auto;
        }
    </style>
    <script type='text/javascript'>

        function Pay(){
            var password=document.getElementById('password').value
            location.href='updatePaid.action?id='+'${productID}'+'&password='+password
        }
        window.onload = function(){
            var optionLis = document.getElementById("menuContainer").getElementsByTagName("li");
            var tabLis = document.getElementById("rightArea").getElementsByTagName("div");
            var st='<%=session.getAttribute("select")%>';
            for(j=0;j<tabLis.length;j++){
                if (tabLis[j].className=="show")
                    tabLis[j].className="hide";
            }
            for(j=0;j<optionLis.length;j++){
                optionLis[j].className="unselected";
            }
            if (st=="personInformation"){
                document.getElementById("personInformation").className="show";
                optionLis[0].className="selected";
            }else if (st=="order"){
                document.getElementById("order").className="show";
                optionLis[1].className="selected";
            }else if (st=="complaint"){
                document.getElementById("complaint").className="show";
                optionLis[2].className="selected";
            }else if (st=="examine"){
                document.getElementById("examine").className="show";
                optionLis[0].className="selected";
            }else if (st=="complaintManage"){
                document.getElementById("complaintManage").className="show";
                optionLis[1].className="selected";
            }else if (st=="noticeManage"){
                document.getElementById("noticeManage").className="show";
                optionLis[2].className="selected";
            }else if (st=="orderManage"){
                document.getElementById("orderManage").className="show";
                optionLis[3].className="selected";
            }

            if (optionLis.length==3){
                for(i=0;i<optionLis.length;i++){
                    optionLis[i].index = i;
                    optionLis[i].onclick = function(){
                        for(j=0;j<optionLis.length;j++){
                            optionLis[j].className="unselected";
                        }
                        for(j=0;j<tabLis.length;j++){
                            if (tabLis[j].className=="show")
                                tabLis[j].className="hide";
                        }
                        this.className="selected";
                        if (this.index==0)
                            document.getElementById("personInformation").className="show";
                        else if (this.index==1)
                            document.getElementById("order").className="show";
                        else if (this.index==2)
                            document.getElementById("complaint").className="show";
                    }
                }
            }else if(optionLis.length==4){
                for(i=0;i<optionLis.length;i++){
                    optionLis[i].index = i;
                    optionLis[i].onclick = function(){
                        for(j=0;j<optionLis.length;j++){
                            optionLis[j].className="unselected";
                        }
                        for(j=0;j<tabLis.length;j++){
                            if (tabLis[j].className=="show")
                                tabLis[j].className="hide";
                        }
                        this.className="selected";
                        if (this.index==0)
                            document.getElementById("examine").className="show";
                        else if (this.index==1)
                            document.getElementById("complaintManage").className="show";
                        else if (this.index==2)
                            document.getElementById("noticeManage").className="show";
                        else if (this.index==3)
                            document.getElementById("orderManage").className="show";
                    }
                }
            }

        }
        function showFrom(){
            document.getElementById("informationTable").className="hide";
            document.getElementById("changeInformationTable").className="show";
        }
        function hideFrom(){
            document.getElementById("informationTable").className="show";
            document.getElementById("changeInformationTable").className="hide";
        }
        function showPay(i){
            document.getElementById(i).className="show pay";
            document.getElementById(i).getElementsByTagName("input")[0].focus();
        }
        function hidePay(i){
            document.getElementById(i).className="hide pay";
        }
        function showComplaint(){
            document.getElementById("newComplaint").className="show";
            document.getElementById("newComplaint").getElementsByTagName("input")[0].focus();
        }
        function hideComplaint(){
            document.getElementById("newComplaint").className="hide";
        }
        function showShop(){
            document.getElementById("newShop").className="show";
            document.getElementById("newShop").getElementsByTagName("input")[0].focus();
        }
        function hideShop(){
            document.getElementById("newShop").className="hide";
        }
        function showBigPic(i){
            document.getElementById(i).className="show bigPic";
        }
        function hideBigPic(i){
            document.getElementById(i).className="hide bigPic";
        }
        function showComplaintProcess(){
            document.getElementById("complaintProcess").className="show";
        }
        function hideComplaintProcess(){
            document.getElementById("complaintProcess").className="hide";
        }
        function showInformation(i){
            document.getElementById(i).className="show userInformation";
        }
        function hideInformation(i){
            document.getElementById(i).className="hide userInformation";
        }

    </script>

</head>
<body>
<div class="headBarContainer">
    <div class="itemsContainer">
        <nav>
            <ul>
                <li class="headItem"><a href="/index/">首页</a></li>
                <li class="headItem" id="clicked"><a href="/index/products">分类</a></li>
                <li class="headItem"><a href="/index/my">我的</a>
            </ul>
        </nav>
    </div>
    <div th:if="${session.userId}!=null" class="logButton" id="logIn">
        <a th:href="@{/user/exit}">
            <div>退出</div>
        </a>
    </div>
    <div th:if="${session.userId}==null" class="logButton" id="logIn">
        <a href="/index/login">
            <div>登录</div>
        </a>
    </div>
    <div th:if="${session.userId}==null" class="logButton" id="signIn">
        <a href="/index/login">
            <div>注册</div>
        </a>
    </div>

</div>
<div class="mainContainer">
    <div class="leftArea">
        <div class="infoContainer">
            <img src="../images/user.png">
            <div>
                <text th:text="${ui.userName}" id="userName"></text>
            </div>
        </div>
        <div id="menuContainer">
            <ul>
                <!--竞买者&拍卖者-->
                <li class="selected"><img src="../images/personInfo.png">个人信息</li>
                <li class="unselected"><img src="../images/order.png">交易订单</li>
                <li class="unselected"><img src="../images/complaint.png">我的投诉</li>
                <!--管理员-->
            </ul>
        </div>
    </div>
    <!--竞买者&拍卖者-->
    <div id="rightArea">
        <!--个人信息-->
        <!--显示-->
        <div id="personInformation" class="show">
            <table class="show" id="informationTable">
                <tr>
                    <td class="firstCol">用户ID</td>
                    <td th:text="${ui.userId}"></td>
                    <td id="buttonContainer"><button id="change"
                                                     onclick="showFrom()">修改信息</button></td>
                </tr>
                <tr>
                    <td class="firstCol">用户名</td>
                    <td th:text="${ui.userName}"></td>
                </tr>
                <tr>
                    <td class="firstCol">用户类型</td>
                    <!--判断-->
                    <td th:text="${ui.userType}"></td>
                </tr>
                <!--<s:if test='ui.userType=="拍卖者"'>
                    <tr>
                        <td class="firstCol">账户余额</td>
                        <td><s:property value="ap.account" /></td>
                    </tr>
                    <tr>
                        <td class="firstCol">信用值</td>
                        <td><s:property value="ap.creditValue" /></td>
                    </tr>
                </s:if>
                <s:else>
                    <tr>
                        <td class="firstCol">账户余额</td>
                        <td><s:property value="bi.account" /></td>
                    </tr>
                    <tr>
                        <td class="firstCol">信用值</td>
                        <td><s:property value="bi.creditValue" /></td>
                    </tr>
                </s:else>-->
                <tr>
                    <td class="firstCol">手机号码</td>
                    <td th:text="${ui.phoneNumber}"></td>
                </tr>
                <tr>
                    <td class="firstCol">真实姓名</td>
                    <td th:text="${ui.name}"></td>
                </tr>
                <tr>
                    <td class="firstCol">my ID number</td>
                    <td th:text="${ui.identiId}"></td>
                </tr>
                <tr>
                    <td class="firstCol">地址</td>
                    <td th:text="${ui.userAddress}"></td>
                </tr>
            </table>
            <!--修改-->
            <form action="update.action" method="post">
                <table class="hide" id="changeInformationTable">

                    <tr>
                        <td class="firstCol">用户ID</td>
                        <td th:text="${ui.userId}"></td>
                        <td id="buttonContainer"><input type="submit" value="保存修改"
                                                        onclick="hideFrom()"></td>
                    </tr>
                    <tr>
                        <td class="firstCol">用户名</td>
                        <td th:text="${ui.userName}"></td>
                        <td id="buttonContainer"><button type="button"
                                                         onclick="hideFrom()">取消修改</button></td>
                    </tr>
                    <tr>
                        <td class="firstCol">用户类型</td>
                        <td th:text="${ui.userType}"></td>
                    </tr>
                    <!--<s:if test='ui.userType=="拍卖者"'>
                        <tr>
                            <td class="firstCol">账户余额</td>
                            <td><s:property value="ap.account" /></td>
                        </tr>
                        <tr>
                            <td class="firstCol">信用值</td>
                            <td><s:property value="ap.creditValue" /></td>
                        </tr>
                    </s:if>-->
                    <!--<s:else>
                        <tr>
                            <td class="firstCol">账户余额</td>
                            <td><s:property value="bi.account" /></td>
                        </tr>
                        <tr>
                            <td class="firstCol">信用值</td>
                            <td><s:property value="bi.creditValue" /></td>
                        </tr>
                    </s:else>-->
                    <tr>
                        <td class="firstCol">手机号码</td>
                        <td><input type="text" name="phoneNumber" /></td>
                    </tr>
                    <tr>
                        <td class="firstCol">真实姓名</td>
                        <td><input type="text" name="name" /></td>
                    </tr>
                    <tr>
                        <td class="firstCol">my ID number</td>
                        <td><input type="text" name="identi_ID" /></td>
                    </tr>
                    <tr>
                        <td class="firstCol">收货地址</td>
                        <td><input type="text" name="useraddress" /></td>
                    </tr>
                    <tr>
                        <td class="firstCol">支付密码</td>
                        <td><input type="text" name="transPwd" /></td>
                    </tr>
                </table>
            </form>
        </div>
        <!--交易订单-->
       <!-- <div id="order" class="hide">
            <table>
                <s:if test='ui.userType=="拍卖者"'>
                    <tr>
                        <td colspan="6" id="buttonContainer"><button
                                onclick="showShop()">上传商品</button></td>
                    </tr>
                    <tr>
                        <th id="nameHead">名称</th>
                        <th>描述</th>
                        <th>种类</th>
                        <th>底价</th>
                        <th>加价幅度</th>
                        <th>预设成交价</th>
                        <th>时间</th>
                        <th>拍卖情况</th>
                    </tr>
                    <s:iterator value="apiList" id="api">
                        <tr>
                            <td class="nameCol"><s:property value="#api.productName" /></td>
                            <td class="describeCol"><s:property value="#api.productDes" /></td>
                            <td class="kindCol"><s:property value="#api.productType" /></td>
                            <td class="startPriceCol">￥<s:property
                                    value="#api.floorPrice" /></td>
                            <td class="stepCol">￥<s:property value="#api.upRange" /></td>
                            <td class="presetPriceCol">￥<s:property
                                    value="#api.transPrice" /></td>
                            <td class="timeCol"><s:property value="#api.startTime" />至<br>
                                <s:property value="#api.endTime" /></td>
                            <td class="timeCol"><s:property value="#api.auctionType" />
                            </td>
                        </tr>
                    </s:iterator>
                </s:if>

            </table>
            <table>
                <tr>
                    <th>订单ID</th>
                    <th>商品ID</th>
                    <th>竞拍成功时间</th>
                    &lt;!&ndash;拍卖者账户显示竞买者ID&ndash;&gt;
                    <s:if test='ui.userType=="拍卖者"'>
                        <th>购买者ID</th>
                        <th>发货地址</th>
                    </s:if>
                    <s:else>
                        <th>拍卖者ID</th>
                    </s:else>
                    <th>金额</th>
                    <th>订单状态</th>
                </tr>

                <s:if test='ui.userType=="拍卖者"'>
                    <s:iterator value="atList" id="at2" status="status">
                        <tr>
                            <td><s:property value="#at2.ticketID" /></td>
                            <td><a href="enterBidJsp.action?productID=${at2.productID}"><s:property value="#at2.productID" /></a></td>
                            <td><s:property value="#at2.successTime" /></td>
                            <td><a href="queryUser.action?queryID=${at2.winnerID}"><s:property value="#at2.winnerID" /></a></td>
                            <td><s:property value="%{#request.adList[#status.index]}" /></td>
                            <td><s:property value="#at2.paySellerAmount" /></td>

                            <s:if test='#at2.isPaid=="否" '>
                                <td>未付款</td>
                            </s:if>
                            <s:else>
                                <td>已付款</td>
                            </s:else>
                        </tr>
                    </s:iterator>
                </s:if>
                <s:else>
                    <% int index=0;ArrayList<Auction_PersonalInfo> apList=(ArrayList<Auction_PersonalInfo>)request.getAttribute("apList"); %>
                    <s:iterator value="atList" id="at2" status="status">
                        <tr>
                            <td><s:property value="#at2.ticketID" /></td>
                            <td><a href="enterBidJsp.action?productID=${at2.productID}"><s:property value="#at2.productID" /></a></td>
                            <td><s:property value="#at2.successTime" /></td>
                            <td><a href="queryUser.action?queryID=<%=apList.get(index).getUserID()%>"><%=apList.get(index).getUserID()%><%&#45;&#45; <s:property value="%{#request.apList[#status.index].userID}" /> &#45;&#45;%></a></td>
                            <td><s:property value="#at2.payAmount" /></td>
                            <s:if test='#at2.isPaid=="否" '>
                                <td><button onclick="showPay(${at2.ticketID})">点击支付</button></td>
                            </s:if>
                            <s:else>
                                <td>已付款</td>
                            </s:else>
                        </tr>
                        <div class="hide pay" id="${at2.ticketID}">
                            <div class="head">付款</div>
                            <div class="payContainer">
                                <div>请确认信息：</div>
                                <div class="format">
                                    订单号：
                                    <s:property value="#at2.ticketID" />
                                </div>
                                <div class="format">
                                    商品ID：
                                    <s:property value="#at2.productID" />
                                </div>
                                <div>请输入支付密码：</div>
                                <div>
                                    <input type="password" id="password${at2.ticketID}" />
                                </div>
                                <div>
                                    <button id="checked"
                                            onclick="location='updatePaid.action?id=${at2.productID}&password='+document.getElementById('password${at2.ticketID}').value;">确认支付</button>
                                    <button onclick="hidePay(${at2.ticketID})" id="cancel">取消支付</button>
                                </div>
                            </div>
                        </div>
                        <%index++; %>
                    </s:iterator>
                </s:else>
            </table>
        </div>-->
        <!--投诉-->
        <!--<div id="complaint" class="hide">
            <div>
                <button onclick="showComplaint()">我要投诉</button>
            </div>
            <table>
                <tr>
                    <th id="firstBox">被投诉人ID</th>
                    <th>投诉内容</th>
                    <th>投诉时间</th>
                    <th>处理情况</th>
                    <th>负责处理人ID</th>
                    <th>处理结果</th>
                </tr>
                <s:iterator value="ciList" id="ci">
                    <tr>
                        <td class="idCol"><s:property value="#ci.respondID" /></td>
                        <td class="mainCol"><s:property value="#ci.comCon" /></td>
                        <td class="timeCol"><s:property value="#ci.comTime" /></td>
                        <s:if test='#ci.isProcessed=="是"'>
                            <td class="signCol"><text class="haveDeal">已处理</text></td>
                        </s:if>
                        <s:else>
                            <td class="signCol"><text class="notDeal">未处理</text></td>
                        </s:else>
                        <td class="id2Col"><s:property value="#ci.handlerID" /></td>
                        <td class="resultCol"><s:property value="#ci.processResult" /></td>
                    </tr>
                </s:iterator>
            </table>
        </div>-->
    </div>
</div>
</body>
</html>